<template>
  <div class="body-layout">
    <header class="top-header">
      <!-- 返回按钮 -->
      <a @click="$router.back(-1);" class="header-left"></a>
      <article class="header-middle">绑定手机号</article>
    </header>
    <div class="marginTop44">
      <div class="vf-binding-phone">
        <p>根据国家相关规定，请您绑定手机号码</p>
        <input type="text" v-model.trim="phone" maxlength="11" @blur='validateMobile()'
               class="vf-binding-phone-number border"
               placeholder="请输入手机号码"/>
        <!--<div class="vf-binding-phone_valigate">-->
        <!--<input type="text" v-model.trim="imgCheckCode" maxlength="4" @blur='validateCheckCode()'-->
        <!--placeholder="请输入右边的验证码"/>-->
        <!--<img class="login-img" :src="imgSrc" @click="verCode"></img>-->
        <!--</div>-->
        <div class="vf-binding-phone_message">
          <input type="number" v-model.trim="phoneCode" maxlength="6" @blur='validateSMSCode()'  placeholder="请输入短信码"/>
          <span class="login-init" v-show="codeShow" @click="phoneMass">获取短信码</span>
          <span class="login-code" v-show="!codeShow">{{code}}s</span>
        </div>
        <!--<div class="phone-btn" v-stat='{button_type:1,extra:""}' @click="bindPhone">绑 定</div>-->
        <div class="phone-btn" @click="bindPhone">绑 定</div>
      </div>
    </div>

  </div>
</template>

<script>
  import util from '../lib/util'

  export default {
    name: 'BindingNumber',
    components: {},
    data: function () {
      return {
        phone: '',
        phoneCode: '',
        imgCheckCode: '',
        imgSrc: util.vars.ajaxUrl + 'captcha/get?captcha_type=1',
        code: 60,
        codeShow: true,
        toast: '',
        toastShow: false,
        wxBack: false,
      }
    },
    created: function () {
      this.verCode();
    },
    mounted: function () {
    },
    methods: {
      //验证电话号码
      validateMobile: function () {
        let pass=true;
        if (!this.phone.length) {
          pass=false;
          return  pass;
        }
        let reg = /^1[34578]\d{9}$/;
        if (!reg.test(this.phone)) {
          pass=false;
          this.$toast('请输入正确的手机号码', {
            duration: '2000'
          });
          return  pass;
        }
        return pass;
      },
      // 验证码
      validateCheckCode: function () {
//        if (!this.imgCheckCode.length) {
//          return
//        }
//
//        if (!/^.{4,6}$/.test(this.imgCheckCode)) {
//          this.$toast('请输入正确的验证码', {
//            duration: '2000'
//          });
//
//          this.imgCheckCode = '';
//        }
      },
      // 验证短息验证码
      validateSMSCode: function () {
        if (!this.phoneCode.length) {
          return
        }

        if (!/^\d{4,6}$/.test(this.phoneCode)) {
          this.$toast('请输入正确的短信码', {
            duration: '2000'
          });
        }
      },
      // 获取图像验证码
      verCode: function () {
        this.imgSrc = util.vars.ajaxUrl + 'captcha/get?captcha_type=1&t=' + new Date();
      },
      // 获取短信验证
      phoneMass: function () {

        if (!this.phone.length) {
          this.$toast('请输入手机号码', {
            duration: '2000'
          });
          return;
        }
//        if (!this.imgCheckCode.length) {
//          this.$toast('请输入图形验证码', {
//            duration: '2000'
//          });
//        }

        if(!this.validateMobile()){
          return;
        }
        //this.validateCheckCode();
        this.codeShow = false;
        // 发送数据
        util.ajax.post('/user/mobilecode', util.jsonStringify({
          captcha: this.phoneCode,
          mobile: this.phone
        }));

        // 倒计时
        util.vars.times = setInterval(() => {
          if (this.code <= 1) {
            this.codeShow = true;
            this.code = 60;
            clearInterval(util.vars.times);
          } else {
            this.code = this.code - 1;
          }
        }, 1000);


//        //验证图形验证码
//        util.ajax.post('/captcha/validate', util.jsonStringify({captcha: this.imgCheckCode}))
//          .then(res => {
//
//            if (res.code === 1) {
//
//              if (res.data.valid) {
//                this.codeShow = false;
//                // 发送数据
//                util.ajax.post('/user/mobilecode', util.jsonStringify({
//                  captcha: this.phoneCode,
//                  mobile: this.phone
//                }));
//
//                // 倒计时
//                util.vars.times = setInterval(() => {
//                  if (this.code <= 1) {
//                    this.codeShow = true;
//                    this.code = 60;
//                    clearInterval(util.vars.times);
//                  } else {
//                    this.code = this.code - 1;
//                  }
//                }, 1000)
//              } else {
//                this.$toast("图形验证码错误", {
//                  duration: '2000'
//                });
//                //重新获取验证码
//                this.verCode();
//              }
//
//            } else {
//              this.$toast(res.msg, {
//                duration: '2000'
//              });
//              //重新获取验证码
//              this.verCode();
//            }
//          });
      },
      //绑定手机号码
      bindPhone: function () {
        let reg = /^1[34578]\d{9}$/;
        if (!reg.test(this.phone)) {
          this.$toast('请输入正确的手机号码', {
            duration: '2000'
          });
          return
        }

        if (!/^\d{4,6}$/.test(this.phoneCode)) {
          this.$toast('请输入正确的短信码', {
            duration: '2000'
          });
          return
        }

        //绑定手机号码
        util.ajax.post('/user/bindmobile', util.jsonStringify({
          mobile: this.phone,
          mobile_code: this.phoneCode
        })).then((res) => {
          if (res.code === 1) {
            this.$toast('手机号绑定成功', {
              duration: '2000'
            });
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000)
          } else {
            this.$toast(res.msg, {
              duration: '2000'
            });
          }

        });
      }
    }
  }
</script>
